<template>
  <div class="pg-setting-permission-admin-rule"
    layout="column">

    <!-- 功能按钮区
    -------------------------- -->
    <div class="gl-page-btns">
      <el-button type="success" size="mini"
        @click.native="showDialogByToggle = !showDialogByToggle">添加新的权限</el-button>
      <el-button @click.native="statusSelected('id', '1')"
        type="primary" size="mini"
        :loading="loadingBtn === '开启' && loadingRow === null">开启</el-button>
      <el-button @click.native="statusSelected('id', '0')"
        type="primary" size="mini"
        :loading="loadingBtn === '关闭' && loadingRow === null">关闭</el-button>
      <el-button @click.native="deleteSelected('id')"
        type="primary" size="mini"
        :loading="loadingBtn === '删除' && loadingRow === null">删除</el-button>
      </div>

    <!-- 数据表格
    -------------------------- -->
    <comp-page-table
      :tableConfig="tableConfig"
      :tableData="tableData"
      :loading="tableLoading"
      :total="tableTotal"
      :pageSize="Number(pageSize)"
      :pageSizes="pageSizes"
      @currentChange="tableCurrentChange"
      @sortChange="tableSortChange"
      @sizeChange="tableSizeChange"
      @selectionChange="tableSelectionChange">
      <el-table-column
        label="操作"
        width="225">
        <template slot-scope="scope">
          <el-button  @click.native="beforeGetData(scope.row)"
            type="text" size="small"
            :loading="loadingBtn === '修改' && loadingRow === scope.$index">修改</el-button>
          <el-button @click.native="statusOne(scope.row.id, scope.$index, '1')"
            type="text" size="mini"
            :loading="loadingBtn === '开启' && loadingRow === scope.$index">开启</el-button>
          <el-button @click.native="statusOne(scope.row.id, scope.$index, '0')"
            type="text" size="mini"
            :loading="loadingBtn === '关闭' && loadingRow === scope.$index">关闭</el-button>
           <el-button @click.native.prevent="sortOne(scope.row.id, scope.$index)"
            type="text" size="small"
            :loading="loadingBtn === '排序' && loadingRow === scope.$index">排序</el-button>
           <el-button @click.native.prevent="deleteOne(scope.row.id, scope.$index)"
            type="text" size="small"
            :loading="loadingBtn === '删除' && loadingRow === scope.$index">删除</el-button>
          </template>
      </el-table-column>
    </comp-page-table>

    <!-- 添加，修改弹窗
    -------------------------- -->
    <add-edit-admin-rule
      :showByToggle="showDialogByToggle"
      :editData="editData"
      @dialogComplete="getTableData"></add-edit-admin-rule>
  </div>
</template>

<script>
import { tableConfig } from './config'
import AddEditAdminRule from './add-edit-admin-rule'
import {
  StatusMixin,
  DeleteMixin,
  SortMixin
} from './mixins'

import { SettingPermissionService } from 'services/Api'
import {
  ConfirmTempMixin,
  btnLoadingMixin,
  tableCoreMixin,
  tableDeleteMixin,
  tableStatusMixin,
  dialogBeforeEditMixin
} from 'services/Public'
import { mapState } from 'vuex'

export default {
  name: 'PgSettingPermissionAdminRule',
  components: { AddEditAdminRule },
  mixins: [
    ConfirmTempMixin,
    btnLoadingMixin,
    tableCoreMixin,
    tableDeleteMixin,
    tableStatusMixin,
    dialogBeforeEditMixin,
    StatusMixin,
    DeleteMixin,
    SortMixin
  ],
  data () {
    return {
      tableConfig,

      paginationBySelf: true
    }
  },
  computed: {
    ...mapState([ 'acc_id' ]),
    // 获取参数
    adminRuleParam () {
      return {
        acc_id: this.acc_id
      }
    }
  },
  methods: {
    // 从allData中获取pid对应的ltitle
    beforeGetData (data) {
      if (data.pid !== '0') {
        data.pTitle = this.allData.find(i => i.id === data.pid).ltitle
      }
      this.getData(data)
    },
    // 用户列表
    preFetchTableData () {
      return SettingPermissionService.adminRule(this.adminRuleParam)
    },
    // 表格数据处理函数
    tableDataHandler (list) {
      return list.map(i => {
        i.menustatusName = i.menustatus === '1' ? '开启' : '关闭'
        return i
      })
    }
  }
}
</script>

<style lang="scss">
@import "src/styles/config/views.scss";

@include b(setting-permission-admin-rule) {}
</style>
